html,body{
    width: 100%;
    height: 100%;
}
/* 左边内容 */
.con-l{
    position: relative;
    width: 60%;
    height: 100%;
    background: #1ca8ef;
}
.con-l img{
    position: absolute;
    left: 50%;top: 50%;
    margin-left: -350px;
    margin-top: -250px;
    vertical-align: middle;
}

/* 右边内容 */
.con-r{
    position: relative;
    width: 40%;height: 100%;
} 

.login-screen{
    text-align: center;
    position: absolute;
    left: 50%;top: 50%;
    margin-left: -200px;
    margin-top: -275px;
    width: 400px;height: 550px;
    padding: 20px;background: #fff;
}
.login-screen li{
    position: relative;
    display: inline-block;
    margin: 30px 0;
}
.login-screen a{color: #00bdff;}
.login-screen li span{cursor: pointer;}
.login-screen .on>span{
    color: #00bdff;
}
.login-screen .on::before{
    content: '';
    display: block;
    position: relative;
    top: 33px;left: 6px;
    width: 45px;
    height: 3px;
    background: #00bdff;
}
.login-screen li>div{
    position: absolute;top: 50px;left: -78px;
}
.login-screen li>div div{
    width: 360px;height: 30px;text-align: left;
    border-bottom: 1px solid #eee;margin: 28px 0 20px;
}
.login-screen li div input{
    outline: none;
    position: relative;top: -6px;
    padding-left: 10px;border: none;width: 300px;
}
.urs::before,.pwd::before{
    content: '';position: relative;
    width: 25px;height: 25px;display: inline-block;
    background: url(../images/loginIcon.png) no-repeat -52px -3px;
}
.pwd::before{background-position: -24px -3px;}
.login-screen li:nth-child(2){
    margin: 0 30px 0;
    width: 2px;height: 14px;
    background: #eee;
}
.login-screen button{
    width: 362px;height: 42px;
    color: #fff;border: none;
    background: #03c5ff;margin: 16px auto;
}
.login-screen li p:nth-child(5){
    position: relative;right: -42px;font-size: 14px;
    color: #909090;
}
.login-screen li p:nth-child(5) span{
    display: inline-block;width: 25px;height: 25px;
    background: url(../images/loginIcon.png) no-repeat -52px -27px;
}
.login-screen .conceal{
    display: none;
}
.login-screen li:nth-child(3)>div{
    top: 50px;left: -216px;height: 260px;
    background: #fcfcfc;
    border: 1px solid #eee;
}
.login-screen li:nth-child(3)>div div{
    text-align: center;
    border: none;
}
.login-screen li:nth-child(3)>div p{
    margin: 10px;font-size: 14px;
}
.login-screen li:nth-child(3)>div>p{
    position: relative;
    top: 200px;left: -80px;
    font-size: 14px;
}
.login-screen li:nth-child(3)>div>p span{
    display: inline-block;width: 25px;height: 25px;
    background: url(../images/loginIcon.png) no-repeat -52px -27px;
}
.login-screen .urs>span,.pwd>span{
    width: 17px;height: 17px;
    line-height: 15px;
    border-radius: 50%;
    background: #eee;
    text-align: center;
    position: relative;
    top: -6px;
    cursor: pointer;
    color: #fff;
    display: none;
}
.login-screen li .active>span{
    display: inline-block;
}
/* 提示框 */
.tips p{
    position:fixed;
    top: 50%;left: 80%;
    transform: translate(-50%,-50%);
    min-width: 100px;height: 100px;
    background: rgba(0,0,0,0.5);
    color: #000;text-align: center;
    line-height: 100px;
    font-size: 14px;
    display: none;
}
.tips .on{
    display: block;
}